<template>
  <!-- 模态部分 -->
  <a-modal class="component-form" v-model:visible="state.visible" title="组件配置" :maskClosable="false">
    <!-- 表单部分 -->
    <a-form :model="state.formState" :rules="state.formRules" layout="vertical" ref="formRef">
      <a-form-item label="业务模式" name="businessType">
        <a-select
          v-model:value="state.formState.businessType"
          :options="state.selectOptions"
          :disabled="props.disabled"
          placeholder="请选择业务模式"
          allowClear
        ></a-select>
      </a-form-item>

      <a-form-item label="栅格大小" name="componentGridSize">
        <a-input
          type="number"
          placeholder="请输入栅格大小"
          :disabled="props.disabled"
          v-model:value="state.formState.componentGridSize"
        ></a-input>
      </a-form-item>

      <a-form-item label="自定义属性" name="componentParams">
        <a-textarea
          :rows="6"
          :disabled="props.disabled"
          v-model:value="state.formState.componentParams"
          allowClear
          :placeholder="$getText('PH_CUSTOM_PROPS')"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="hide">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk" v-if="!props.disabled">确认</a-button>
    </template>
  </a-modal>
</template>
<script>
/**
 * @desc 组件配置弹窗
 * @date 2023/1/29
 * @author 邓清波
 */
export default {
  name: 'ComponentConfigure'
}
</script>

<script setup>
import { ref, reactive, defineExpose, nextTick, defineEmits, defineProps } from 'vue'
import { validatorJsonPromise } from '@/views/management/utils/validate'
const emit = defineEmits(['submit'])
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})

const state = reactive({
  visible: false, // 模态框显隐
  formState: {}, // 表单状态,
  formRules: {
    componentParams: [
      {
        trigger: 'change',
        validator: validatorJsonPromise
      }
    ],
    businessType: [{ required: false, message: '请选择业务模式', trigger: 'blur' }],
    componentGridSize: [{ required: false, message: '请输入栅格大小', trigger: 'blur' }]
  },
  selectOptions: [
    {
      label: '高速',
      value: '1'
    },
    {
      label: '公路',
      value: '2'
    }
  ]
})
const formRef = ref(null)

defineExpose({
  show: show,
  hide: hide
})

/**
 * @desc 显示模态框并设置回显表单
 * **/
function show(item) {
  state.visible = true
  nextTick(() => {
    formRef.value.resetFields()
    state.formState = { ...item, componentOriginalPath: null }
  })
}

/**
 * @desc 关闭模态框
 */
function hide() {
  state.visible = false
  nextTick(() => {
    state.formState = {}
  })
}
/**
 * @desc 模态框确认
 *
 * **/
async function handleOk() {
  try {
    await formRef.value.validate()
    emit('submit', state.formState)
  } catch (e) {
    console.log('handleOk err', e)
  }
}
</script>
